import { Space } from "antd-mobile"
import { Dialog, NavBar, Selector } from "antd-mobile"
import { CloseOutline, MoreOutline } from "antd-mobile-icons"
import './AddDetail.scss'
import { useLocation, useNavigate } from "react-router-dom"
import type React from "react"
import { Form, Input, Button } from 'antd-mobile'
import SelectInput from "../../components/addDetaill/SelectInput"
import { useDispatch, useSelector } from "react-redux"
import { useEffect, useState } from "react"
import { setcustomerInfo, editcustomerInfo } from "../../store/CustomerSlice"
import type { ICustomerItem } from "../../interface/IlistItem"
import querystring from "querystring"
import { addCareness } from "../../store/UserSlice"
import './AddDetail.scss'

function AddDetail( ) {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const location = useLocation()
    const params = querystring.parse(location.search.slice(1))
    console.log(params)
    let [form] = Form.useForm()
    // useEffect(() => {
    //     if (props.id) {
    //         form = useSelector((state: any) => {
    //             state.newReceiptionItem.LikeAndDislike.find(item =>item.id === )
    //         })
    //     }
    // }, [props.id])

    const { customer } = useSelector((state: any) => state.customer)
    const { search } = useLocation()
    const data = querystring.parse(search.slice(1))
    const editData = {
        ...data,
        id: Number(data.id),
        sex: [data.sex],
        car: [data.car],
        dinner: [data.dinner],
        hotel: [data.hotel]
    } as ICustomerItem
    const [customData, setCustomData] = useState<ICustomerItem | {}>({})
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' } as React.CSSProperties} >
                <MoreOutline />
                <CloseOutline />
            </Space>
        </div>
    )

    const back = async () => {
        // navigate('/layout')
        const result = await Dialog.confirm({
            title: "退出编辑",
            content: '退出此次编辑，当前编辑内容不会被保存，确认退出吗？'
        })
        if (result) {
            setCustomData({})
            navigate(-1)
        }
    }

    const onFinish = (values: ICustomerItem) => {
        if (!editData.name) {
            dispatch(addCareness({ ...values, id: Date.now() }))
        } else {
            dispatch(editcustomerInfo({ ...values, id: editData.id }))
        }
        navigate(-1)
    }
    useEffect(() => {
        if (Object.keys(customData).length !== 0) dispatch(setcustomerInfo(customData))
    }, [customData])

    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                height: "100vh",
            }}
        >
            <NavBar right={right} onBack={back} style={{ '--border-bottom': '1px solid #ccc', fontSize: "12px", height: "45px" }}>
                重要客户喜好禁忌
            </NavBar>
            <Form
                initialValues={editData}
                layout='horizontal'
                style={{ "--border-inner": "none", flex: "1", overflow: "auto" }}
                onFinish={onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >
                <Form.Item
                    name='name'
                    label='姓名'
                    rules={[{ required: true, message: '姓名不能为空' }]}
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    name='sex'
                    label='性别'
                    rules={[{ required: true, message: '请选择' }]}
                >
                    <Selector
                        style={{
                            '--border-radius': '100px',
                            '--border': 'solid transparent 1px',
                            '--checked-border': 'solid var(--adm-color-primary) 1px',
                            '--padding': '8px 24px',
                        }}
                        showCheckMark={false}
                        options={[
                            {
                                label: "男",
                                value: "1"
                            },
                            {
                                label: "女",
                                value: "2"
                            }
                        ]}
                    />
                </Form.Item>
                <Form.Item
                    name='position'
                    label='职位'
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item
                    name='telephone'
                    label='联系方式'
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <SelectInput name="dinner" label="用餐喜好&禁忌" editData={editData} />
                <SelectInput name="hotel" label="住宿喜好&禁忌" editData={editData} />
                <SelectInput name="car" label="用车喜好&禁忌" editData={editData} />
                <Form.Item
                    name='remark'
                    label='备注'
                >
                    <Input placeholder='请输入' />
                </Form.Item>
            </Form>
        </div >
    )
}
export default AddDetail